<div class="toolbar"></div>
<div class="p-3">
    <div class="card mb-3">
        <h5 class="card-header">CKEditor5</h5>
        <div class="card-body">
            <p>
                <span>更多方法参考</span>
                <a href="https://ckeditor.com" target="_blanl">官方文档</a>
                <a class="ml-2" routerLink="/demo/quill">[旧版本：QUILL编辑器]</a>
            </p>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-lg-6">
                    <ts-ckeditor [options]="options" [(content)]="content" (contentChange)="updateMobileView()">
                    </ts-ckeditor>
                </div>
                <div class="col-lg-6">
                    <div class="docs-demo-device ios">
                        <figure class="m-auto">
                            <svg class="docs-demo-device__md-bar" viewBox="0 0 1384.3 40.3" ssrc="132.0">
                                <path class="st0"
                                    d="M1343 5l18.8 32.3c.8 1.3 2.7 1.3 3.5 0L1384 5c.8-1.3-.2-3-1.7-3h-37.6c-1.5 0-2.5 1.7-1.7 3z"
                                    ssrc="132.0."></path>
                                <circle class="st0" cx="1299" cy="20.2" r="20" ssrc="132.1."></circle>
                                <path class="st0"
                                    d="M1213 1.2h30c2.2 0 4 1.8 4 4v30c0 2.2-1.8 4-4 4h-30c-2.2 0-4-1.8-4-4v-30c0-2.3 1.8-4 4-4zM16 4.2h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H16c-8.8 0-16-7.2-16-16s7.2-16 16-16z"
                                    ssrc="132.2."></path>
                            </svg>
                            <svg class="docs-demo-device__ios-notch" viewBox="0 0 219 31" ssrc="132.1">
                                <path
                                    d="M0 1V0h219v1a5 5 0 0 0-5 5v3c0 12.15-9.85 22-22 22H27C14.85 31 5 21.15 5 9V6a5 5 0 0 0-5-5z"
                                    fill-rule="evenodd" ssrc="132.0."></path>
                            </svg>
                            <iframe class="h-100 w-100 pt-2" style="overflow-y: auto;overflow-x: hidden;"></iframe>
                        </figure>
                    </div>
                </div>
            </div>
            <pre class="mt-3">
简单说明

0. 与QUILL文本编辑器不同，本编辑器图片是独立上传的

1. 图片上传服务只能通过后台API，无法直接对接第三方上传服务

2. 视频只支持外部链接，不支持上传

3. 本编辑器需要两个js:[本体文件]ckeditor-classic、[翻译]zh-cn.js

4. 编辑器有4种模式，目前只接入了classic模式（直接改用其他模式暂时无效
            </pre>
        </div>
    </div>
</div>